<template>
    <div class="invoice-list">
      <el-form ref="ruleFormRef" :model="searchForm" inline>
        <el-form-item label="单据编号">
          <el-input v-model="searchForm.billNo" placeholder="请输入单据编号.." />
        </el-form-item>

         <el-form-item label="操作员">
                  <el-select v-model="searchForm.username" placeholder="请输入操作员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in cities"
      :key="item.id"
      :label="item.username"
      :value="item.username  "
    >
      <span style="float: left">{{ item.username }}</span>
    </el-option>
  </el-select>
        </el-form-item>

        <el-form-item label="往来单位">
          <el-select v-model="searchForm.orgAbr" placeholder="请输入财务人员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in Bcities"
      :key="item.id"
      :label="item.orgAbr"
      :value="item.orgAbr  "
    >
      <span style="float: left">{{ item.orgAbr }}</span>
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="单据日期">
          <el-date-picker v-model="searchForm.startTime" type="date" placeholder="开始时间" />
          <el-date-picker v-model="searchForm.endTime" type="date" placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="searchForm.remark" placeholder="请输入备注..." />
        </el-form-item>

        <el-form-item label="收入账号">
          <el-select v-model="searchForm.accountName" placeholder="请输入财务人员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in Ccities"
      :key="item.id"
      :label="item.name"
      :value="item.name  "
    >
      <span style="float: left">{{ item.name }}</span>
    </el-option>
  </el-select>
        </el-form-item>

        <el-form-item label="财务人员">
          <el-select v-model="searchForm.handsPersonName" placeholder="请输入财务人员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in Acities"
      :key="item.id"
      :label="item.name"
      :value="item.name  "
    >
      <span style="float: left">{{ item.name }}</span>
    </el-option>
  </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="accountList">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="dialogVisible2 = true">新增</el-button>
      <el-button type="" @click="accountHeadDels">删除</el-button>
      <el-button type="" @click="updStatus(false)">审核</el-button>
      <el-button type="" @click="updStatus(true)">反审核</el-button>
      <el-button type="" @click="exportXlsx()">导出</el-button>

      <el-table :data="tableData" style="width: 100%"   @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="操作">
      <template #default="scope">
        <el-button type="text" size="small" @click="handleSelect(scope.row.id)"
          >查看</el-button
        >
        <el-button type="text" size="small" @click="handleEdit(scope.row.id)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="text"
          @click="handleDelete(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
        <el-table-column prop="orgAbr" label="往来单位" />
        <el-table-column prop="billNo" label="单据编号" />
        <el-table-column prop="billTime" label="单据日期" />
        <el-table-column prop="username" label="操作员" />
        <el-table-column prop="handsPersonName" label="财务人员" />
        <el-table-column prop="accountName" label="收入账号" />
        <el-table-column prop="totalPrice" label="收入金额" />
        <el-table-column prop="remark" label="备注"/>
        <el-table-column label="状态" width="120">
        <template v-slot="scope">
          <span v-if="scope.row.status === 0" style="color: gainsboro;">未审核</span>
          <span v-else-if="scope.row.status === 1" style="color: green;">审核成功</span>
          <span v-else-if="scope.row.status === 2"  style="color: red;">审核失败</span>
          <span v-else-if="scope.row.status === 9"  style="color: orange;">审核中</span>
        </template>
      </el-table-column>
      </el-table>

      <div class="demo-pagination-block">
        <el-pagination v-model:page=searchForm.page v-model:size=searchForm.size
          :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total=total
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>

  <!-- 收入单详情查看 -->
  <el-dialog
    v-model="dialogVisible"
    title="收入单详情查看"
    width="30%">
  <el-form
    ref="ruleFormRef1"
    :model="selectOneFormRef"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="往来单位">
      <el-input v-model="selectOneFormRef.orgAbr" disabled/>
    </el-form-item>
    <el-form-item label="单据编号">
      <el-input v-model="selectOneFormRef.billNo" disabled/>
    </el-form-item>
    <el-form-item label="单据日期">
      <el-input v-model="selectOneFormRef.billTime" disabled/>
    </el-form-item>
    <el-form-item label="操作员">
      <el-input v-model="selectOneFormRef.username" disabled/>
    </el-form-item>
    <el-form-item label="财务人员">
      <el-input v-model="selectOneFormRef.handsPersonName" disabled/>
    </el-form-item>
    <el-form-item label="收入账号">
      <el-input v-model="selectOneFormRef.accountName" disabled/>
    </el-form-item>
    <el-form-item label="收入金额">
      <el-input v-model="selectOneFormRef.totalPrice" disabled/>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="selectOneFormRef.remark" disabled/>
    </el-form-item>
    <el-form-item label="状态">
      <el-input v-model="selectOneFormRef.status" disabled/>
    </el-form-item>
  </el-form>
  </el-dialog>

  <!-- 收入单据修改 -->
<el-dialog
    v-model="dialogVisible1"
    title="收入单据修改"
    width="30%">
  <el-form
    ref="ruleFormRef2"
    :model="updateFormRef"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
  <el-form-item label="往来单位">
          <el-select v-model="updateFormRef.organId
" placeholder="请输入财务人员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in Bcities"
      :key="item.id"
      :label="item.orgAbr"
      :value="item.id  "
    >
      <span style="float: left">{{ item.orgAbr }}</span>
    </el-option>
  </el-select>
        </el-form-item>
    <el-form-item label="单据编号">
      <el-input v-model="updateFormRef.billNo" disabled/>
    </el-form-item>
    <el-form-item label="单据日期">
      <el-input v-model="updateFormRef.billTime" disabled/>
    </el-form-item>
    <el-form-item label="操作员">
                  <el-select v-model="updateFormRef.creator" placeholder="请输入操作员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in cities"
      :key="item.id"
      :label="item.username"
      :value="item.id  "
    >
      <span style="float: left">{{ item.username }}</span>
    </el-option>
  </el-select>
        </el-form-item>
    <el-form-item label="财务人员">
          <el-select v-model="updateFormRef.handsPersonId" placeholder="请输入财务人员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in Acities"
      :key="item.id"
      :label="item.name"
      :value="item.id  "
    >
      <span style="float: left">{{ item.name }}</span>
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="收入账号">
          <el-select v-model="updateFormRef.accountId
" placeholder="请输入财务人员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in Ccities"
      :key="item.id"
      :label="item.name"
      :value="item.id  "
    >
      <span style="float: left">{{ item.name }}</span>
    </el-option>
  </el-select>
        </el-form-item>
    <el-form-item label="收入金额">
      <el-input v-model="updateFormRef.totalPrice"/>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="updateFormRef.remark"/>
    </el-form-item>
    <el-form-item label="状态">
      <el-input :value="updateFormRef.status === 1 ? '审核成功' : updateFormRef.status === 2 ? '审核失败' : updateFormRef.status === 9 ? '审核中' : '未审核'" disabled/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()"
        >提交</el-button
      >
    </el-form-item>
  </el-form>
  </el-dialog>

   <!-- 收入单据新增 -->
<el-dialog
    v-model="dialogVisible2"
    title="收入单据新增加"
    width="30%">
  <el-form
    ref="ruleFormRef3"
    :model="saveFormRef"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
  <el-form-item label="往来单位">
          <el-select v-model="saveFormRef.organId
" placeholder="请输入财务人员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in Bcities"
      :key="item.id"
      :label="item.orgAbr"
      :value="item.id  "
    >
      <span style="float: left">{{ item.orgAbr }}</span>
    </el-option>
  </el-select>
        </el-form-item>
    <el-form-item label="单据编号">
      <el-input v-model="saveFormRef.billNo" disabled/>
    </el-form-item>
    <el-form-item label="单据日期">
      <el-input v-model="saveFormRef.billTime" disabled/>
    </el-form-item>
    <el-form-item label="财务人员">
          <el-select v-model="saveFormRef.handsPersonId" placeholder="请输入财务人员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in Acities"
      :key="item.id"
      :label="item.name"
      :value="item.id  "
    >
      <span style="float: left">{{ item.name }}</span>
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="收入账号">
          <el-select v-model="saveFormRef.accountId
" placeholder="请输入财务人员..." style="width: 240px; height: 35px;" >
    <el-option
      v-for="item in Ccities"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
      <span style="float: left">{{ item.name }}</span>
    </el-option>
  </el-select>
        </el-form-item>
    <el-form-item label="收入金额">
      <el-input v-model="saveFormRef.totalPrice"/>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="saveFormRef.remark"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm1()"
        >提交</el-button
      >
    </el-form-item>
  </el-form>
  </el-dialog>
  </template>

  <script setup>
  import { ref,reactive } from 'vue';
  import {list, selectUserList,selectPersonList,selectOrganizationList,selectAccountList, status,del, selectOne, saveOrUpd, dels} from "../../api/accountHead/index.js"
  import { ElMessage } from 'element-plus';
  import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

const exportXlsx = () => {
 if (!tableData.value || tableData.value.length === 0) {
  console.error('Table data is not provided.');
  return;
 }
 // 创建工作表
 const data = XLSX.utils.json_to_sheet(tableData.value);
 // 创建工作簿
 const wb = XLSX.utils.book_new();
 // 将工作表放入工作簿中
 XLSX.utils.book_append_sheet(wb, data, 'Data');
 // 生成文件并下载
 const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
 const blob = new Blob([wbout], { type: 'application/octet-stream' });
 saveAs(blob, 'test.xlsx');
};


  // 表格多选
  const multipleSelection = ref([])
  const handleSelectionChange = (val) => {
  multipleSelection.value = val.map(item => item.id);
  }
  const ruleFormRef = ref()

  // 搜索表单数据
  const searchForm = ref({
    page:1,
    size:5,
    accountName: '',
    billNo: '',
    orgAbr: '',
    username: '',
    remark:'',
    handsPersonName:'',
    startTime:'',
    endTime:''
  });

  // 表格数据
  const tableData = ref([]);

  // 总记录数
  const total = ref('');
  //分页操作
  const handleSizeChange = (val) => {
    searchForm.value.size = val
    accountList()
  }
  const handleCurrentChange = (val) => {
    searchForm.value.page = val
    accountList()
  }

  // 重置处理函数
  const onReset = () => {
    searchForm.value.accountName= '',
    searchForm.value.billNo= '',
    searchForm.value.orgAbr= '',
    searchForm.value.username= '',
    searchForm.value.remark='',
    searchForm.value.handsPersonName='',
    searchForm.value.startTime='',
    searchForm.value.endTime=''
  };

  // 收入单，分页、多条件查询列表展示
  function accountList(){
      list(searchForm.value).then(res=>{
        console.log(res.data);
        total.value=res.data.total
        tableData.value=res.data.data
      })
  }
  accountList()
//操作员下拉
const cities = ref([])
function userList(){
  selectUserList().then(res=>{
    cities.value=res.data.data
  })
}
userList();

//财务人员下拉
const Acities = ref([])
function a(){
  selectPersonList().then(res=>{
    // console.log(res.data);
    Acities.value=res.data.data
  })
}
a();
//往来单位下拉
const Bcities = ref([])
function b(){
  selectOrganizationList().then(res=>{
    Bcities.value=res.data.data
  })
}
b();
//收入账号的下拉
const Ccities = ref([])
function c(){
  selectAccountList().then(res=>{
    Ccities.value=res.data.data
  })
}
c();

// 审核/反审核
function updStatus(isReverse){
  status(multipleSelection.value,isReverse).then(res=>{
    console.log(res.data);
    if(res.data.code==200){
      ElMessage.success("操作成功")
      accountList()
    }else{
      ElMessage.error("操作失败")
      accountList()
    }

  })
}
//删除
function handleDelete(row){
  del(row).then(res=>{
    if(res.data.code=200){
      ElMessage.success(res.data.msg)
      accountList()
    }else{
      ElMessage.error(res.data.msg)
      accountList()
    }
  })
}
//查看
const dialogVisible = ref(false)
const ruleFormRef1 = ref()
let selectOneFormRef = reactive({})
function accountHeadSelect(row){
  selectOne(row).then(res=>{
    if(res.data.code=200){
      selectOneFormRef=res.data.data
    }else{
      ElMessage.error(res.data.msg)
      accountList()
    }
  })
}
function handleSelect(row){
  accountHeadSelect(row)
  dialogVisible.value=true
}

// 修改
const dialogVisible1 = ref(false)
const ruleFormRef2 = ref()
const updateFormRef = ref({})
function accountHeadSelect1(row){
  selectOne(row).then(res=>{
    console.log(res.data);
    if(res.data.code=200){
      updateFormRef.value=res.data.data
    }else{
      ElMessage.error(res.data.msg)
      accountList()
    }
  })
}
function handleEdit(row){
  accountHeadSelect1(row)
  dialogVisible1.value=true
}

const submitForm = () => {
  saveOrUpd(updateFormRef.value).then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.msg);
      accountList()
    }else{
      ElMessage.error(res.data.msg);
      accountList()
    }
  })
}

//新增
const dialogVisible2 = ref(false)
const ruleFormRef3 = ref()
//规范当前的时间
function formatISODate(date) {
  // 获取年、月、日、时、分、秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  // 组合成 yyyy-MM-dd HH:mm:ss 格式
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const now = new Date();
const currentTime = formatISODate(now);
//随机生成单据编号
function generateRandomString() {
  // 生成两个大写字母
  const letters = 'SR';

  // 生成11位数字
  let numbers = '';
  for (let i = 0; i < 11; i++) {
    numbers += Math.floor(Math.random() * 10).toString();
  }

  // 组合成13位字符串
  return letters +  numbers;
}
const randomString = generateRandomString();
const saveFormRef = ref({billTime:currentTime,billNo:randomString})
const submitForm1 = () => {
  saveOrUpd(saveFormRef.value).then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.msg);
      accountList()
    }else{
      ElMessage.error(res.data.msg);
      accountList()
    }
  })
}

// 批量删除
function accountHeadDels(){
  dels(multipleSelection.value).then(res=>{
    console.log(res.data);
    if(res.data.code==200){
      ElMessage.success(res.data.msg)
      accountList()
    }else{
      ElMessage.error(res.data.msg)
      accountList()
    }
  })
}






  </script>

  <style scoped>
  .invoice-list {
    margin: 20px;
  }
  </style>